<template>
  <section class="scheduling">
    <div class="table-container">
      <el-table
        v-loading="loading"
        element-loading-text="Loading..."
        :data="schedulingData"
        border
        height="100%"
        style="width: 100%"
      >
        <el-table-column prop="drName" label="护士名称" align="center" />
        <el-table-column prop="jobNumber" label="职称" align="center" />
        <el-table-column prop="entryDate" label="入职时间" align="center" />
        <el-table-column v-for="item in tableHead" :key="item" align="center">
          <template #header>
            <div>{{ item.slice(5) }}</div>
            <div>{{ getWeek(item) }}</div>
          </template>
          <template #default> </template>
        </el-table-column>
        <el-table-column prop="original" label="原有积假" align="center" />
        <el-table-column prop="existing" label="现有积假" align="center" />
      </el-table>
    </div>
    <footer class="scheduling-footer">
      <img
        src="../../assets/images/preview.svg"
        alt=""
        @click="handlePreOrNextIcon('preview')"
      />
      <span @click="handlePreOrNextIcon('preview')">前一周</span>
      <span @click="handleThisWeek">本周</span>
      <span @click="handlePreOrNextIcon('next')">后一周</span>
      <img
        src="../../assets/images/next.svg"
        alt=""
        @click="handlePreOrNextIcon('next')"
      />
    </footer>
  </section>
</template>

<script setup>
import { get_listTable } from "@/apis/scheduling.js";
import { getWeek, getPreOrNextWeek } from "@/utils/myDateTime.js";
import { ref } from "vue";
let schedulingData = ref([]); //排班数据
let weeksDate = getPreOrNextWeek("next");
let beginDate = ref(weeksDate[0]); //一周起始日期
let endDate = ref(weeksDate[6]); //一周结束日期
let tableHead = ref(weeksDate); //自定义表头的数据
let loading = ref(true); //表格加载状态

//获取排班数据
async function getSchedulingData() {
  loading.value = true;
  let res = await get_listTable({ beginDate: beginDate.value, endDate: endDate.value });
  schedulingData.value = res.rows;
  loading.value = false;
}
getSchedulingData();

//获取上一周或下一周排班数据
function handlePreOrNextIcon(sign) {
  if (sign === "next") {
    let res = getPreOrNextWeek(sign, endDate.value);
    beginDate.value = res[0];
    endDate.value = res[6];
    tableHead.value = res;
  } else {
    let res = getPreOrNextWeek(sign, beginDate.value);
    beginDate.value = res[0];
    endDate.value = res[6];
    tableHead.value = res;
  }
  getSchedulingData();
}

// 获取本周排班数据
function handleThisWeek() {
  let res = getPreOrNextWeek("next");
  beginDate.value = res[0];
  endDate.value = res[6];
  tableHead.value = res;
  getSchedulingData();
}
</script>

<style lang="scss" scoped>
.scheduling {
  height: 100%;
  background: #fff;
  position: relative;
  padding: 2vh 1vw 0 1vw;
  display: flex;
  flex-direction: column;
  .table-container {
    flex: 1;
    overflow-y: auto;
    :deep(.el-table) {
      font-size: 0.8vw;
      th.el-table__cell.is-leaf {
        background: #e2e2e2;
      }
    }
  }
  .scheduling-footer {
    position: absolute;
    bottom: 1vh;
    width: 100%;
    text-align: center;
    padding: 1vh 0;
    > span {
      margin: 0 2vw;
    }
  }
}
</style>
